import { FC } from 'react';
import {
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText
} from '@mui/material';
import ClassTwoToneIcon from '@mui/icons-material/ClassTwoTone';
import { resources } from './resources';
import './index.less';

const ResourcesMenu: FC = () => {
  return (
    <List>
      {
        resources.map(({ title }) =>
          <ListItem disablePadding key={ title }>
            <ListItemButton>
              <ListItemIcon>
                <ClassTwoToneIcon />
              </ListItemIcon>
              <ListItemText primary={ title } />
            </ListItemButton>
          </ListItem>
        )
      }
    </List>
  );
};

export default ResourcesMenu;
